<template>
	<div>
     <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="header" left-arrow @click-left="$router.go(-1)" />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >  <!-- @load="onLoad" -->
      <div class="van-cellBox">
        <van-cell v-for="item in articleList"  @click="oNarticle(item.id)" :key="item.id" >
          <div class="new-imgs">
            <img :src="item.funImg" alt="">
          </div>
          <div class=" new-boxs">
            <p class="new-name">{{item.title}}</p>
            
          </div>
        </van-cell>
      </div>
    </van-list>
	</div>
</template>
<script type="text/javascript">
import apiHttp from '../../../../api/index'
import { Toast } from 'vant';
export default {
  data() {
    return {
      id:this.$route.query.id ? this.$route.query.id : '',  // 判断页面是否存在id
      header: "团队展示",
      articleList:[],
      content:"",
      loading: false,
      finished: false,
      total:-1,
      page:0,
      userId:sessionStorage.getItem('userId'),
    };
  },
  methods: {  
    onLoad(){
      if(this.articleList.length == this.total){
          this.finished  = true
          this.loading = false;
      }else{
          this.page++
          this.getArticleList();
      }
    },  
    oNarticle(id){
      this.$router.push({path:"/details/details",query: { id: id}});
    },
    // 新闻列表---接口
    getArticleList(){
      let params ={
        page : this.page,
        pageSize :10,
        commId:this.id,
        type:11
      }
      apiHttp.comIndex.getArticleList(params,resp=>{
       if(resp.resultCode == '000000'){
          for(let i = 0; i < resp.data.articleList.length; i++){
            this.articleList.push(resp.data.articleList[i])
          }
          this.total = resp.data.total
          this.loading = false;
        }else{
          Toast(resp.resultMsg)
        }
      })
      
    },
   
  },
}
</script>
<style scoped>
 .van-cellBox::after{
    overflow: hidden;
    content: "";
    display: block;
    height: 0;
    clear: both;
  
   }
  .van-cell{
    width: 46%;
    float: left;
    margin-left: 0.4rem;
    margin-bottom: 0.4rem;
    border-radius: 10px;
  }
  .van-cell__value{
    box-shadow: 0px 0px 12px 0px rgba(86, 31, 34, 0.3);
    border-radius: 4px; 
    background-color: #ffffff;
    padding: 0.5rem;
  }
  .van-list{
    width: 100%;
    margin: 0.4rem auto;
  }
  .new-boxs{
    width: 100%;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 0.8rem;
    text-align: center;
    height: 2rem;
  }
  .new-boxs p{
    overflow:hidden;
    -webkit-line-clamp:2;
    display:-webkit-box;
    -webkit-box-orient:vertical;

  }
  .new-boxs .new-name{
    margin: 0.3rem auto;
    color: #000000;
    font-size: 0.65rem;
    margin-top: 0.5rem;
    height: 1rem;
    line-height: 1rem;
    overflow: hidden;
  }
  .new-boxs .new-span{
    color: #999999;
    line-height: 0.8rem;
    font-size: 0.6rem;
  }
  .new-imgs{
    height: 6rem;
    width: 100%;
    overflow: hidden;
  }
  .new-imgs img{
    max-width: 100%;
    border-radius: 0.3rem;
  }
  .guide-content{
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 0.7rem;
    margin-top: 0.4rem;
  }
</style>
